<template>
  <div class="national-standard-detail">
    <!-- 招标公告行 -->
    <div class="bid-type-row">
      <span class="bid-type" @click="handleTypeClick(bidData.bidType)">{{ bidData.bidType }}</span>
      <span class="separator">/</span>
      <span class="bid-title">{{ bidData.title }}</span>
    </div>
    <div class="header-section">
      <!-- 标题区域 -->
      <div class="page-header">
        <h1 class="title">{{ bidData.title }}</h1>
        <div class="header-info">
          <div class="info-left">
            <span class="tag">{{ bidData.subBidType }}</span>
            <span class="city">{{ bidData.city }}</span>
          </div>
          <div class="info-right">
            <span class="time">{{ bidData.publishTime }}</span>
            <el-button type="primary" class="action-btn" @click="handleViewOriginal">查看原文</el-button>
            <el-button class="action-btn" :disabled="!hasAttachments">查看附件</el-button>
            <el-button class="action-btn" :class="{ 'is-active': bidData.isSchedule }" @click="handleScheduleClick">添加日程</el-button>
            <el-button class="action-btn" :class="{ 'is-active': bidData.isFollow }" @click="handleFollowClick">关注</el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 标签页导航 -->
    <div class="tabs-container">
      <el-tabs v-model="activeTab" @tab-click="handleTabClick">
        <el-tab-pane label="摘要信息" name="summary">
          <template #label>
            <span class="tab-label">摘要信息</span>
          </template>
        </el-tab-pane>
        <el-tab-pane label="公告原文" name="announcement">
          <template #label>
            <span class="tab-label">公告原文</span>
          </template>
        </el-tab-pane>
        <el-tab-pane label="招标单位" name="company">
          <template #label>
            <span class="tab-label">招标单位</span>
          </template>
        </el-tab-pane>
        <el-tab-pane label="项目联系人" name="contact">
          <template #label>
            <span class="tab-label">项目联系人</span>
          </template>
        </el-tab-pane>
        <el-tab-pane label="AI导标书" name="ai">
          <template #label>
            <span class="tab-label" @click.stop="handleAIClick">AI导标书<el-tag size="small" effect="plain" class="new-tag">NEW</el-tag></span>
          </template>
        </el-tab-pane>
      </el-tabs>
    </div>

    <!-- 内容区域 -->
    <div class="content-container">
      <!-- 摘要信息 -->
      <div id="summary" class="section" ref="summaryRef">
        <div class="section-title">摘要信息</div>
        <table class="summary-table">
          <tr>
            <th>招标单位</th>
            <td>
              <a href="#" class="unit-link" @click.prevent="handleUnitClick(bidData.bidUnit)">{{ bidData.bidUnit.name }}</a>
            </td>
            <th>甲方联系方式</th>
            <td class="contact-cell">
              <el-tooltip content="查看联系方式" placement="top">
                <el-icon class="phone-icon" @click="scrollToContact('bidUnit')"><Phone /></el-icon>
              </el-tooltip>
            </td>
            <th>招标产品</th>
            <td>{{ bidData.tenderProducts }}</td>
          </tr>
          <tr>
            <th>代理单位</th>
            <td>
              <a href="#" class="unit-link" @click.prevent="handleUnitClick(bidData.agentUnit)">{{ bidData.agentUnit.name }}</a>
            </td>
            <th>代理联系方式</th>
            <td class="contact-cell">
              <el-tooltip content="查看联系方式" placement="top">
                <el-icon class="phone-icon" @click="scrollToContact('agentUnit')"><Phone /></el-icon>
              </el-tooltip>
            </td>
            <td colspan="2"></td>
          </tr>
        </table>
      </div>

      <!-- 公告原文 -->
      <div id="announcement" class="section" ref="announcementRef">
        <div class="section-title">公告原文</div>
        <div class="announcement-content" v-html="bidData.mainBody"></div>
        <!-- 附件下载区域 -->
        <div v-if="hasAttachments" class="attachments-section">
          <div class="divider"></div>
          <div class="attachment-item">
            <div class="attachment-header">
              <span class="attachment-label">下载附件({{ bidData.attachmentUrls.length }})</span>
              <span class="attachment-hint">(点击跳转至原文中下载)</span>
            </div>
            <div class="attachment-links">
              <a v-for="(attachment, index) in bidData.attachmentUrls" :key="index" :href="attachment.bosUrl" target="_blank" class="attachment-link">
                {{ attachment.urlName }}
              </a>
            </div>
          </div>
          <div class="divider"></div>
        </div>
      </div>

      <!-- 招标单位 -->
      <div id="company" class="section" ref="companyRef">
        <div class="section-title">招标单位</div>
        <div class="unit-cards-container">
          <div v-for="unit in bidData.bidUnit.units" :key="unit.id" class="unit-card" @click="handleUnitClick(bidData.bidUnit)">
            <div class="unit-avatar">
              <span class="avatar-text">{{ unit.nameAlias.slice(0, 2) }}<br />{{ unit.nameAlias.slice(2, 4) }}</span>
            </div>
            <div class="unit-info">
              <h4>{{ unit.name }}</h4>
            </div>
          </div>
        </div>
      </div>

      <!-- 项目联系人 -->
      <div id="contact" class="section" ref="contactRef">
        <div class="section-title">
          项目联系人
          <el-tooltip content="项目联系人指本项目直接负责人，查看相关单位全部联系人请前往单位画像或企业详情中查看。" placement="top">
            <el-icon class="info-icon"><InfoFilled /></el-icon>
          </el-tooltip>
        </div>
        <div class="contact-section">
          <div class="contact-title">招标单位联系人</div>
          <table class="contact-table">
            <tr>
              <th>姓名</th>
              <th>电话</th>
              <th>完整号码来源</th>
            </tr>
            <tr v-for="(contact, index) in bidData.bidUnit.contactInfo" :key="index">
              <td>{{ contact.contactPerson }}</td>
              <td>{{ contact.tel }}</td>
              <td>-</td>
            </tr>
          </table>
        </div>

        <div class="contact-section">
          <div class="contact-title">代理机构联系人</div>
          <table class="contact-table">
            <tr>
              <th>姓名</th>
              <th>电话</th>
              <th>完整号码来源</th>
            </tr>
            <tr v-for="(contact, index) in bidData.agentUnit.contactInfo" :key="index">
              <td>{{ contact.contactPerson }}</td>
              <td>{{ contact.tel }}</td>
              <td>-</td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue';
import { useRouter } from 'vue-router';
import { Phone, InfoFilled } from '@element-plus/icons-vue';

const router = useRouter();
const activeTab = ref('summary');
const isSticky = ref(false);

// 引用各个section
const summaryRef = ref(null);
const announcementRef = ref(null);
const companyRef = ref(null);
const contactRef = ref(null);
const aiRef = ref(null);

const bidData = ref({
  'id': '961e8217d5ec8077590eb54fe664bdfa',
  'title': '建湖县2024年稻麦绿色高质高效创建（新型肥料）采购项目采购公告',
  'industryId': null,
  'industryChainId': null,
  'md5Id': '961e8217d5ec8077590eb54fe664bdfa',
  'projectId': '77b81bcaf14179f433aa610dcd56e2b7',
  'projectNo': 'JSZC-320925-JSTX-G2025-0007',
  'publishDate': '2025-03-19',
  'publishTime': '4天前',
  'province': '江苏省',
  'city': '盐城市',
  'region': '建湖县',
  'originalUrl': 'http://czj.yancheng.gov.cn/art/2025/3/19/art_20174_22428.html',
  'bidUnit': {
    'id': '9aaa8157ee5c49a0990e8b8ece2cb897',
    'name': '建湖县农业技术综合服务中心',
    'units': [
      {
        'id': '9aaa8157ee5c49a0990e8b8ece2cb897',
        'name': '建湖县农业技术综合服务中心',
        'logo': 'https://lianqiai-public.oss-accelerate.aliyuncs.com/logo/9aaa8157ee5c49a0990e8b8ece2cb897.jpg',
        'nameAlias': '建湖县农',
        'isClick': true
      }
    ],
    'contactInfo': [
      {
        'contactPerson': '吴**',
        'tel': '13605119750',
        'protectContact': null
      }
    ]
  },
  'winBidUnit': null,
  'agentUnit': {
    'id': '68378a2aef44914f6fa30f4817991c86',
    'name': '江苏腾讯工程咨询有限公司',
    'units': [
      {
        'id': '68378a2aef44914f6fa30f4817991c86',
        'name': '江苏腾讯工程咨询有限公司',
        'logo': 'https://lianqiai-public.oss-accelerate.aliyuncs.com/logo/68378a2aef44914f6fa30f4817991c86.jpg',
        'nameAlias': '腾信',
        'isClick': true
      }
    ],
    'contactInfo': [
      {
        'contactPerson': '王**',
        'tel': '18021804466',
        'protectContact': null
      }
    ]
  },
  'winBidAmount': '',
  'budgetAmount': '',
  'tenderProducts': '新型肥料',
  'domain': '',
  'bidType': '招标公告',
  'subBidType': '招标',
  'background': '#2680E1',
  'buyFileEndDate': null,
  'buyFileEndDays': null,
  'bidEndDate': '25年04月09日',
  'bidEndDays': 17,
  'annex': null,
  'mainBody':
    '<div><div><table border=1><colgroup><col></colgroup><tbody><tr><td><p>项目概况</p><p>建湖县2024年稻麦绿色高质高效创建（新型肥料）采购项目 JSZC-320925-JSTX-G2025-0007 招标项目的潜在投标人应在苏采云系统 获取招标文件，并于2025-04-09 09:00（北京时间）前递交投标文件。</p></td></tr></tbody></table>一、项目基本情况<p>项目编号：JSZC-320925-JSTX-G2025-0007</p><p>项目名称：建湖县2024年稻麦绿色高质高效创建（新型肥料）采购项目</p><p>预算金额：165.200000万元（采购包1：72.600000万元；采购包2：31.600000万元；采购包3：61.000000万元）</p><p>最高限价（如有）：本项目单价限价一标段（硅氮肥）6300元/吨，二标段（30％有机无机海藻复混肥）3200元/吨，三标段（45％缓释肥）3100元/吨，投标单位投标单价超过该单价限价的作无效标论处 </p><p>采购需求：</p><div data-tag-id=42 data-tag-type=div><p>采购范围内所有产品的供货、运输（送达至采购方指定地点并卸货）及售后服务等内容；</p></div><p>合同履行期限：成交供应商7日内按照采购人要求分批完成供货，采购人指定地点并装卸完毕，每批的供货时间和数量由采购人确定，成交供应商必须在24小时内送货到位，不得以批量小为由拒绝送货或延期供货 标段划分：三个，本项目兼投兼中（评定标顺序一标段→二标段→三标段） 质保期：二年</p><p>本项目（是/否）接受联合体投标：否</p><div><div>二、申请人的资格要求：</div></div><div><div><p>（一）满足《中华人民共和国政府采购法》第二十二条规定：</p><div data-tag-id=57 data-tag-type=div title=通用资格要求><p>1.法人或者其他组织的营业执照等证明文件，自然人的身份证明。</p><p>2.上一年度的财务状况报告（成立不满一年不需提供）。</p><p>3.依法缴纳税收和社会保障资金的相关材料。</p><p>4.具备履行合同所必需的设备和专业技术能力的书面声明。</p><p>5.参加政府采购活动前3年内在经营活动中没有重大违法记录的书面声明。</p></div><p>（二）落实政府采购政策需满足的资格要求：</p><div data-tag-id=64 data-tag-type=div title=落实政府采购政策需满足的资格要求><p>1.本项目专门面向中小企业采购，投标人须为符合《关于印发中小企业划型标准规定的通知》（工信部联企业[2011]300号）文件的中小微企业（投标时须提供中小企业声明函，否则按无效标处理）。</p><p>2.政府采购鼓励优先采购节能产品、环境标志产品；</p><p>严格执行政府采购关于支持节能产品、环境标志产品的相关政策规定。如本次采购的产品属于财政部、国家发展改革委、生态环境部、市场监管总局等部门发布的节能产品、环境标志产品品目清单政府强制采购范围的，供应商必须在响应文件中提供所投产品的相关证书(由国家确定的认证机构出具的、处于有效期之内的节能产品、环境标志产品认证证书)。节能产品、环境标志产品品目清单以递交响应文件截止时已正式公布的最近一期信息为准，如属政府强制采购产品未提供认证证书的或认证证书提供不全的将视为未实质性响应采购要求。其他条件相同情况下，应当优先采购节能产品、环境标志产品。</p><p>3.执行投标产品的商品包装、快递包装相关政策；</p><p>供应商对于投标产品的商品包装、快递包装应按照《关于印发《商品包装政府采购需求标准（试行）》、《快递包装政府采购需求标准（试行）》的通知》（财办库〔2020〕123号）执行</p><p>4.执行数据中心采购相关政策；</p><p>若涉及到数据中心采购，应按照《<绿色数据中心政府采购需求标准（试行）>的通知》（财库〔2023〕7号）执行。</p></div></div></div><div><div><p>（三）本项目的特定资格要求：</p><div data-tag-id=46 data-tag-type=div title=特定资格要求><p>采购包1</p><p>1.投标申请人应是中华人民共和国境内注册的供应商；</p><p>2.未被"信用中国"网站（www.creditchina.gov.cn）列入失信被执行人、重大税收违法案件当事人名单、政府采购严重失信行为记录名单；</p><p>3.投标产品须具有有效期内的肥料登记证或农业农村部网页备案号截图；</p><p>4.单位负责人为同一人或者存在直接控股、管理关系的不同供应商，不得参加同一合同项下的政府采购活动。</p><p>采购包2</p><p>1.投标申请人应是中华人民共和国境内注册的供应商；</p><p>2.未被"信用中国"网站（www.creditchina.gov.cn）列入失信被执行人、重大税收违法案件当事人名单、政府采购严重失信行为记录名单；</p><p>3.投标产品须具有有效期内的肥料登记证或农业农村部网页备案号截图；</p><p>4.单位负责人为同一人或者存在直接控股、管理关系的不同供应商，不得参加同一合同项下的政府采购活动。</p><p>采购包3</p><p>1.投标申请人应是中华人民共和国境内注册的供应商；</p><p>2.未被"信用中国"网站（www.creditchina.gov.cn）列入失信被执行人、重大税收违法案件当事人名单、政府采购严重失信行为记录名单；</p><p>3.投标产品须具有有效期内的肥料登记证或农业农村部网页备案号截图；</p><p>4.单位负责人为同一人或者存在直接控股、管理关系的不同供应商，不得参加同一合同项下的政府采购活动。</p></div>三、获取招标文件</div></div><p>时间：自招标文件公告发布之日起5个工作日</p><p>地点：苏采云系统</p><p>方式：苏采云系统</p><p>售价：0.00元</p><div><div>四、提交投标文件截止时间、开标时间和地点<p>2025-04-09 09:00 （北京时间）</p><p>地点：苏采云系统</p></div></div>五、公告期限<p>自本公告发布之日起5个工作日。</p><div><div>六、其他补充事宜<div data-tag-id=65 data-tag-type=div title=其他补充事宜><p>1.各投标人在投标截止时间前应当每天都上网查询，以便获取更新的澄清、修改、补充内容。凡涉及到该项目的补充说明和修改，均以江苏政府采购网上的更正或补充通知为准。</p><p>2. 投标人如在投标过程中存在以下行为，将被列入不良行为记录名单。</p><p>2.1提供虚假材料谋取中标成交的或采取不正当手段诋毁、排挤其他供应商的；</p><p>2.2投标人递交无竞争力投标文件的。</p><p>3.投标人存在串通投标、以他人名义投标、弄虚作假等违法违规行为，或者无正当理由放弃投标、中标资格，造成项目招标失败的，不得参加该项目重新招标的投标。</p><p>4.因供应商的系统环境、操作等原因导致报名、开评标过程中出现问题由供应商自行承担负责。</p><p>5. 除单一来源采购项目外，为采购项目提供整体设计、规范编制或者项目管理、监理、检测等服务的供应商，不得再参加该采购项目的其他采购活动。</p></div><div><div>七、对本次招标提出询问，请按以下方式联系。</div></div><div><div><p>1.采购人信息</p><div data-tag-id=61 data-tag-type=div title=采购人信息><p>采购包1、采购包2、采购包3</p><p>单位名称：建湖县农业技术综合服务中心</p><p>单位地址：建湖县农业农村局（双湖路东首）</p><p>联系人：吴先生</p><p>联系电话：13605119750</p></div></div></div><div><div><p>2.采购代理机构信息（如有）</p><div data-tag-id=62 data-tag-type=div title=代理机构信息><p>单位名称：江苏腾讯工程咨询有限公司</p><p>单位地址：建湖县湖中南路天铂·铂金街（建湖宝龙广场）8号楼二楼</p><p>联系人：王女士</p><p>联系电话：18021804466</p></div><p>3.项目联系方式</p><div data-tag-id=50 data-tag-type=div title=项目联系方式><p>项目联系人：王女士</p><p>电话：18021804466</p></div></div></div></div></div></div> </div>',
  'isFollow': false,
  'isSchedule': false,
  'mainBodyType': 'html',
  'attachmentUrls': [
    {
      'urlName': 'JSZC-320925-JSTX-G2025-0007采购文件.doc',
      'url': '',
      'bosUrl': 'http://112.24.96.112:8080/ycczjzfcg/tempfile/6ad38123fc7e4cb99bc56c3524b4e092.doc',
      'id': null,
      'isFavorite': null
    }
  ],
  'contentType': 'html',
  'contentAttachmentUrl': [],
  'timeLine': [],
  'relateCompany': [],
  'preBidDate': null,
  'bidDetail': [],
  'failDetail': []
});

// 计算是否有附件
const hasAttachments = computed(() => {
  return bidData.value.attachmentUrls && bidData.value.attachmentUrls.length > 0;
});

// 处理类型点击
const handleTypeClick = (type) => {
  router.push({
    path: '/consultation/nationalStandard',
    query: {
      activeName: type === '招标公告' ? 'notice' : type === '中标结果' ? 'result' : type === '采购意向' ? 'intention' : 'all'
    }
  });
};

// 查看原文
const handleViewOriginal = () => {
  if (bidData.value.originalUrl) {
    window.open(bidData.value.originalUrl, '_blank');
  }
};

// 处理日程点击
const handleScheduleClick = () => {
  bidData.value.isSchedule = !bidData.value.isSchedule;
};

// 处理关注点击
const handleFollowClick = () => {
  bidData.value.isFollow = !bidData.value.isFollow;
};

// 处理标签点击
const handleTabClick = (tab) => {
  const element = document.getElementById(tab.props.name);
  if (element) {
    element.scrollIntoView({ behavior: 'smooth' });
  }
};

// 处理单位点击
const handleUnitClick = (unit) => {
  if (unit && unit.units && unit.units[0] && unit.units[0].isClick) {
    window.open(`/company-detail/${unit.id}`, '_blank');
  }
};

// 滚动到联系方式
const scrollToContact = (type) => {
  const contactSection = document.getElementById('contact');
  if (contactSection) {
    contactSection.scrollIntoView({ behavior: 'smooth' });
    activeTab.value = 'contact';
  }
};

// 处理AI点击
const handleAIClick = () => {
  const url = router.resolve({
    path: '/consultation/tenderWriting'
  });
  window.open(url.href, '_blank');
};

// 监听滚动更新激活的标签
const updateActiveTab = () => {
  const sections = [
    { id: 'summary', ref: summaryRef },
    { id: 'announcement', ref: announcementRef },
    { id: 'company', ref: companyRef },
    { id: 'contact', ref: contactRef },
    { id: 'ai', ref: aiRef }
  ];

  for (const section of sections) {
    if (section.ref.value) {
      const rect = section.ref.value.getBoundingClientRect();
      if (rect.top <= 100 && rect.bottom > 100) {
        activeTab.value = section.id;
        break;
      }
    }
  }
};

// 监听滚动
const handleScroll = () => {
  const tabsContainer = document.querySelector('.tabs-container');
  if (tabsContainer) {
    const rect = tabsContainer.getBoundingClientRect();
    isSticky.value = rect.top <= 0;
  }
  updateActiveTab();
};

onMounted(() => {
  window.addEventListener('scroll', handleScroll);
});

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll);
});
</script>

<style scoped>
.tabs button {
  margin-right: 10px;
}
.activity-ticker {
  background: #fafafc;
  display: flex;
  height: 54px;
  padding: 10px 0;
  position: relative;
  white-space: nowrap;
  width: 100%;
}
/* 选中的 tab 样式 */
:deep(.el-tabs__item.is-active) {
  font-size: 18px;
  font-weight: 600;
  color: rgb(0, 82, 217);
}

/* 未选中的 tab 样式 */
:deep(.el-tabs__item) {
  font-size: 16px;
  font-weight: 500;
  color: rgb(153, 153, 153);
}
:deep(.el-tabs__header) {
  margin: 0;
}
.national-standard-detail {
  padding: 20px;
  background: #fff;
}

.header-section {
  background-color: #f8fafc;
  padding: 20px;
  margin-bottom: 24px;
}

.bid-type-row {
  margin-bottom: 16px;
  font-size: 14px;
  color: #999;
}

.bid-type {
  cursor: pointer;
  color: #2680e1;
  padding: 2px 8px;
  border-radius: 2px;
}

.bid-type:hover {
  opacity: 0.9;
}

.separator {
  margin: 0 8px;
}

.bid-title {
  color: #333;
}

.page-header {
  margin-bottom: 0;
}

.title {
  font-size: 20px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 16px 0;
  line-height: 1.4;
}

.header-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.info-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tag {
  padding: 2px 8px;
  background: #eef2f9;
  color: #2680e1;
  border-radius: 2px;
  font-size: 14px;
}

.city {
  padding: 2px 8px;
  background: #eef2f9;
  border-radius: 2px;
  color: #666;
  font-size: 14px;
}

.info-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.time {
  color: #999;
  font-size: 14px;
  margin-right: 24px;
}

.action-btn {
  height: 32px;
  padding: 0 16px;
}

.action-btn.is-active {
  color: #0052d9;
  border-color: #0052d9;
}

.new-tag {
  transform: scale(0.8);
  margin-left: 4px;
  border: 1px solid #2680e1;
  background: transparent;
  color: #2680e1;
}

/* 内容区域样式 */
.section {
  padding: 24px 0;
}

.section-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 16px;
  padding-left: 12px;
  border-left: 4px solid #2680e1;
  line-height: 1;
}

.announcement-content {
  /* padding: 16px; */
  /* background: #f8fafc; */
  /* border-radius: 4px; */
  /* line-height: 1.6; */
}

.summary-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #ebeef5;
}

.summary-table th,
.summary-table td {
  padding: 12px 16px;
  text-align: left;
  border: 1px solid #ebeef5;
  font-size: 14px;
  line-height: 1.4;
}

.summary-table th {
  background-color: #f8fafc;
  color: #666;
  font-weight: normal;
  width: 120px;
}

.summary-table td {
  background-color: #fff;
  color: #333;
}

.contact-cell {
  width: 80px;
  text-align: center;
}

.contact-cell i {
  color: #2680e1;
  font-size: 18px;
  cursor: pointer;
}

.contact-cell i:hover {
  opacity: 0.8;
}

.unit-link {
  color: #2680e1;
  text-decoration: none;
}

.unit-link:hover {
  text-decoration: underline;
}

/* 摘要信息内容区域 */
#summary {
  padding: 0;
}

.section-title {
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 18px;
}

/* 调整表格行的布局 */
.table-row:nth-child(3) .table-cell {
  flex: 2;
}

.content-container {
  padding: 20px;
}

.section:last-child {
  border-bottom: none;
}

.section h3 {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 24px;
}

.info-item {
  display: flex;
  margin-bottom: 16px;
  line-height: 1.6;
}

.info-item .label {
  color: #666;
  width: 100px;
  flex-shrink: 0;
}

.info-item .value {
  color: #333;
  flex: 1;
}

.unit-cards-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.unit-card {
  display: flex;
  align-items: center;
  padding: 16px;
  background: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  width: 100%;
}

.unit-avatar {
  min-width: 48px;
  height: 48px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eef2f9;
  margin-right: 12px;
}

.avatar-text {
  color: #2680e1;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
  white-space: pre-line;
}

.unit-info {
  flex: 1;
  min-width: 0;
}

.unit-info h4 {
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.unit-info p {
  color: #666;
  margin: 4px 0 0 0;
  font-size: 14px;
}

.contact-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #ebeef5;
  margin-bottom: 16px;
}

.contact-table th,
.contact-table td {
  padding: 12px 16px;
  text-align: left;
  border: 1px solid #ebeef5;
  font-size: 14px;
  line-height: 1.4;
}

.contact-table th {
  background-color: #f8fafc;
  color: #666;
  font-weight: normal;
}

.contact-table td {
  background-color: #fff;
  color: #333;
}

.contact-section {
  margin-bottom: 24px;
}

.contact-section:last-child {
  margin-bottom: 0;
}

.contact-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 16px;
}

.info-icon {
  font-size: 16px;
  color: #999;
  margin-left: 4px;
  cursor: pointer;
}

.info-icon:hover {
  color: #666;
}

.attachments-section {
  margin: 24px 0;
}

.divider {
  height: 1px;
  background-color: #ebeef5;
  margin: 16px 0;
}

.attachment-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.attachment-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.attachment-label {
  color: #666;
  font-size: 14px;
}

.attachment-hint {
  color: #999;
  font-size: 12px;
}

.attachment-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.attachment-link {
  color: #2680e1;
  text-decoration: none;
  font-size: 14px;
}

.attachment-link:hover {
  text-decoration: underline;
}
</style>
